import { create_staticCssTxt_mana } from '../../../../../element/css/setStaticCsstxt';
import { domTree } from '../../../../../element/domTree';
import { normalizeContainer, packNode } from '../../../../../element/Func';
import { initDrag } from '../../../../drag/Func/initDragEl';

const ctaticCss_dragList_spacename = 'dragList_space';

/**
 * 中间 过渡元素 id
 */
const dragList_floatDom_id = 'dragLisT_floatDom';

/**
 * 中间 过渡元素 默认 class
 */
const dragList_default_cla = 'dragList_default';

/**
 * 中间 过渡元素 style id
 */
const dragList_style_id = 'dragList_style_id';

const staticCss = create_staticCssTxt_mana(ctaticCss_dragList_spacename);

/**
 * 中间 过渡元素
 * @type {HTMLElement}
 */
let dragLisT_floatDomEl;

/**
 * 创建 或 获取 中间 过渡元素
 * @returns
 */
function getOrCreate_floatDomEl() {
  // 尝试获取元素
  dragLisT_floatDomEl = normalizeContainer(dragList_floatDom_id, true);

  if (dragLisT_floatDomEl == null) {
    create_dragList_floatEl();
  }

  return dragLisT_floatDomEl;
}

/**
 * 创建 中间过渡元素
 */
function create_dragList_floatEl() {
  // 创建 float dom
  initDom();

  // 装载 css
  initDefaultCss();

  // 装载 drag
  initDrag(dragLisT_floatDomEl);
}

/**
 * 创建 元素 并添加 到 targetEl 的 第一个元素
 */
function initDom() {
  let dragList_folat_domT = {
    tag: 'div',
    props: ['class', 'id'],
    attribute: ['style'],

    class: [dragList_default_cla, 'wind_light', 'disnone', 'opcity_03'],
    id: dragList_floatDom_id,
    queue: ['a'],
    a: {
      tag: 'span',
      props: ['innerHTML'],
      innerHTML: 0,
    },
  };

  dragLisT_floatDomEl = domTree(dragList_folat_domT);

  packNode(document.body, dragLisT_floatDomEl, true, normalizeContainer('app'));
}

/**
 * 添加 draglist default 的 css
 */
function initDefaultCss() {
  let defaultClass = `
  
.dragList_default {
  position: absolute;

  box-sizing: border-box;

  cursor: pointer;

  width: 70px;
  height: 70px;

  border-radius: 50%;

  font-size: 30px;

  color: #3399ff;

  background-color: #33ccff;
}
.dragList_default > span {
  display: inline-block;
  position: relative;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.event_enable {
  pointer-events: none;
}
.opcity_03 {
  opacity: 0.3;
}

.spaceWhite_anima[spaceActive='false'] {
  margin: 0px !important;
  padding: 0px !important;
  min-width: 0px !important;
  min-height: 0px !important;
  overflow: hidden;
  opacity: 0 !important;
}
.spaceWhite_anima[spaceActive='true'] {
  min-width: 20px !important;
  min-height: 20px !important;
  opacity: 1 !important;
}

.widthaaa {
  background-color: #778999;
  transition: all 0.2s 0s ease-in;
}
.unitItem {
  padding: 5px 10px;
}
  `;
  staticCss.setStaticCssTxt(dragList_style_id, defaultClass);
}
export { getOrCreate_floatDomEl };
